<link rel="stylesheet" th:href="@{admin/plugins/treegrid/jquery.treegrid.css}">

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">课程时间安排</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">教学管理</li>
                    <li class="breadcrumb-item active">课程时间安排</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info">
        <form id="searchForm" class="needs-validation form-inline" novalidate="">
            <div class="form-group">
                <label for="courseName">课程名字:</label>
                <input type="text" class="form-control m-2" id="courseName" required="">
            </div>
            <div class="form-group">
                <label for="courseId">分类:</label>
                <select id="courseId" class="form-control m-2" th:with="type=${@dict.getCourseList()}" required="">
                    <option selected disabled>选择课程</option>
                    <option th:each="dict : ${type}" th:text="${dict.key}" th:value="${dict.value}"
                            ></option>
                </select>
            </div>
            <!--<div class="form-group">
                <label for="status">状态:</label>
                <select id="status" class="form-control m-2" required="">
                    <option selected disabled>选择状态</option>
                    <option value="1">已发布</option>
                    <option value="0">草稿</option>
                </select>
            </div>-->
            <div class="form-group">
                <button class="btn btn-primary ml-3" type="submit">查询</button>
                <button class="btn btn-default ml-2" type="reset">重置</button>
            </div>
        </form>
    </div>
    <div class="card card-body">
        <div id="toolbar">
            <shiro:hasPermission name="coursePlan:add">
                <button id="btn_add" type="button" class="btn btn-primary" onclick="addCoursePlan()">
                    <span class="fas fa-plus" aria-hidden="true"></span>新增
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="coursePlan:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
                </button>
            </shiro:hasPermission>
        </div>
        <table class="table-sm mt-3" id="table"></table>
        <div id="coursePlanLayer" style="display: none;padding: 20px;">
            <table id="p-table"></table>
        </div>
    </div>

</section>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="formContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdateBtn">保存
                </button>
            </div>
        </div>
    </div>
</div>
<script th:src="@{admin/plugins/treegrid/jquery.treegrid.min.js}"></script>
<script th:src="@{admin/plugins/treegrid/jquery.treegrid.extension.js}"></script>
<script th:src="@{admin/plugins/treegrid/tree.table.js}"></script>
<script th:src="@{admin/plugins/layui/layui.js}"></script>
<script th:src="@{admin/plugins/laydate/laydate.js}"></script>
<script>
    var editFlag = "[[${@perms.hasPerm('coursePlan:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('coursePlan:delete')}]]";
    //var courseList = [[${@dict.getCourseList()}]];
    var columns = [
        {checkbox: true},

        {
            field: 'id',
            title: 'id',
            visible: false
        },
        {
            field: 'periods',
            title: '期数',
            align: "center",
        },
        {
            field: 'courseName',
            title: '课程名称',
            align: "left"
        }, {
            field: 'address',
            title: '上课地址',
            align: "center"
        },
        {
            field: 'startTime',
            title: '上课开始时间',
            align: "center",
        },
        {
            field: 'endTime',
            title: '上课结束时间',
            align: "center",
        },
        {
            field: 'isChild',
            title: '是否少儿科目',
            align: "center",
            formatter: function (value) {
                return value ==1 ? '儿童课程' : '成人课程'
            }
        },
        {
            field: 'status',
            title: '状态',
            align: "center",
            formatter: function (value) {
                return value ==1 ? '启用' : '禁止'
            }
        },


        {
            field: 'operation',
            title: '操作',
            align: "center",
            width: 150,
            formatter: function (value, row, index) {
                var edit = editFlag ? '<button class="btn btn-info btn-sm" onclick="editCoursePlan(' + row.id + ')">编辑</button>' : '';
                var del = deleteFlag ? '<button class="btn btn-danger btn-sm ml-1" onclick="deleteCoursePlan(' + row.id + ')">删除</button>' : '';
                return edit + del;
            }
        }];

    var options = {
        id: "#table",
        url: '/coursePlan/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
        Core.refreshTable("#table")
    }

    /*查询参数*/
    function queryParams(params) {
        return {
            pageNumber: params.pageNumber,
            pageSize: params.pageSize,
            courseId: $("#courseId").val(),
            courseName: $("#courseName").val(),
            //status: $("#status").val(),
        };
    }

    // 查询
    $('#searchForm').submit(function (event) {
        event.preventDefault();
        event.stopPropagation();
        refreshTable();
    })


    /*新增*/
    function addCoursePlan() {
        Core.load("#formContent", "/coursePlan/add", function () {
            $('#formTitle').text('新增')
            $("#formModal").modal('show');
        }, 2);
    }

    /*编辑*/
    function editCoursePlan(id) {
        Core.load("#formContent", "/coursePlan/edit?id=" + id, function () {
            var status = $('input:radio[name="status"]:checked').val();
            var courseId = $("input[name='courseId']").val();
            $('#d-pname1').val(status);
            $('#d-pname').val(courseId);
            $('#formTitle').text('编辑')
            $("#formModal").modal('show');
        }, 2);
    }

    /*删除*/
    function deleteCoursePlan(id) {
        Core.confirm("确定删除该课程安排吗？", function () {
            Core.postAjax("/coursePlan/delete", {"id": id}, function (data) {
                refreshTable();
                layer.msg(data.msg);
            })
        })
    }



    /*加载一级分类*/
     function showCoursePlan() {
         Core.postAjax("/coursePlan/listCourse", function (data) {
             $('#p-table').bootstrapTable({
                 columns: [{radio: true},
                     {
                         field: 'courseName',
                         title: '课程名称',
                         align: "center"
                     }, {
                         field: 'remarks',
                         title: '课程备注',
                         align: "center",
                     }],
                 data: data,
                 cache: false,
                 clickToSelect: true
             });

         })

     }


    // 保存或更新
    $('#saveOrUpdateBtn').on('click', function () {
        var $f = $('#coursePlanForm');
        var valid = $f[0].checkValidity();
        var url = $f.find("input[name='id']").val() ? "/coursePlan/edit" : "/coursePlan/add"
        if (valid) {
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, $f.serialize(), function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    refreshTable();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
        $f.addClass("was-validated")
    })

  // function saveOrUpdate() {
  //       var $f = $('#coursePlanForm');
  //       var valid = $f[0].checkValidity();
  //       var url = $f.find("input[name='id']").val() ? "/coursePlan/edit" : "/coursePlan/add"
  //       if (valid) {
  //           Core.mask("#saveOrUpdateBtn");
  //           Core.postAjax(url, $f.serialize(), function (data) {
  //               Core.unmask("#saveOrUpdateBtn");
  //               if (data.status === 200) {
  //                   $("#formModal").modal("hide");
  //                   treeTableConf.table.refresh();
  //               }
  //               layer.msg(data.msg);
  //           }, function () {
  //               Core.unmask("#saveOrUpdateBtn");
  //           })
  //       }
  //       $f.addClass("was-validated")
  //   }

    // 批量删除
    $("#btn_batch_delete").on('click', function () {
        var checkedRows = Core.selectMutiData("#table");
        if (checkedRows) {
            Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                var ids = [];
                $.each(checkedRows, function (i, item) {
                    ids.push(item.id);
                })
                Core.postAjax("/coursePlan/batch/delete", {"ids": ids}, function (data) {
                    if (data.status === 200) {
                        refreshTable();
                    }
                    layer.msg(data.msg);
                })
            })
        }
    })


</script>